<script setup lang="ts">
import { showToast } from 'vant';
import type { ShopItemType } from '@/type/lidare'
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'
import { ref, computed } from "vue"
import { useRouter } from "vue-router"
const router = useRouter();
const store = useCounterStore();
const { shopcartList } = storeToRefs(store);
const { changeShopCartList } = store;
const isAddShopCart = computed(() => shopcartList.value.some(item => item.id == props.item.skuId));

const props = defineProps<{
  item: ShopItemType
}>();
// console.log(props.item);
//添加购物车
const changeShopcart = (type: boolean = true) => {
  console.log('加入购物车');
  let item = {
    ...props.item,
    id: props.item.skuId,
    count: 1,
    isSelect: false
  }
  console.log(item, 'item');
  changeShopCartList({ item, type });
  if (type) { showToast("加入成功") } else { showToast("已取消") }
}
const toDetail = () => {
  router.push({
    name: "detail",
    params: {
      id: props.item.skuId
    },
    query: {
      img: props.item.image
    }
  });
}
</script>
<template>
  <div class="shop-item" @click.stop="toDetail">
    <div class="img-box">
      <img :src="props.item.image" alt="">
    </div>
    <div class="my-text title">{{ props.item.fullName }}</div>
    <div class="tags">
      <div class="tag" v-for="(tag, index) in props.item.promotionalSign" :key="index">{{ tag }}</div>
    </div>
    <div class="footer">
      <div class="price">&yen;{{ Number.parseInt(props.item.salesPrice) / 100 }}</div>
      <Transition name="opt">
        <van-icon v-if="!isAddShopCart" @click.stop="changeShopcart" class="icon" name="shopping-cart-o" />
        <div v-else class="collected" @click.stop="changeShopcart(false)">已加入</div>
      </Transition>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.shop-item {
  width: 1.7rem;
  height: 2.5rem;
  background-color: var(--bgc-white);
  border-radius: .08rem;
  margin-bottom: .08rem;
  padding: .1rem;
  box-sizing: border-box;
  font-size: .15rem;

  .img-box {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto;
    margin-top: .1rem;
  }

  .title {
    -webkit-line-clamp: 2;
    text-align: center;
    margin: .06rem 0;
    height: .4rem;
  }

  .tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .tag {
      color: var(--text-red-deep);
      border: 0.01rem solid var(--text-red-deep);
      border-radius: .02rem;
      font-size: .12rem;
      display: inline-block;
      padding: 0 .02rem;
      margin-bottom: .05rem;
    }
  }

  .footer {
    position: relative;
    width: 100%;
    height: .2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.06rem;

    .price {
      color: var(--text-red-deep);
      font-size: .12rem;
      font-weight: bold;
    }

    .icon {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      font-size: .18rem;
      color: var(--text-gray);
    }

    .collected {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      font-size: .14rem;
      color: var(--text-gray);
    }
  }
}
</style>